<template>

    <div class="newsdetails-container">
        <h3>{{newsDts.title}}</h3>
        <div class="subnds">
            <span class="one">发表时间: {{newsDts.add_time | newsDate}}</span>
            <span class="two">点击: {{newsDts.click}}次</span>
        </div>
        <hr>
        <div class="content" v-html="newsDts.content"></div>
        <comment :cid="id"></comment>
    </div>

</template>

<script>
 // 导入详情页的路径
 import {getNewsDetails} from '../../api/index.js'
 // 导入Toast 弹窗 这是js 必须按需导入
import { Toast } from "mint-ui";

// 导入子组件
import comment from '../subcomponent/SubComponents.vue'
    export default({
        data(){
            return{
                id: this.$route.params.id,
                newsDts: []
            }
        },
        methods: {
            getNewsDts() {
                getNewsDetails(this.id).then(res => {
                    console.log(res)
                    if(res.data.status === 0 ) {
                        this.newsDts = res.data.message[0]
                    }else {
                        Toast('获取信息失败！')
                    }
                })
            }
        },
        created(){
            this.getNewsDts()
        },
        components: {
            comment: comment
        }
    })

</script>


<style lang="scss" scoped>
.newsdetails-container {
    padding: 0 5px;
    h3 {
        font-size: 16px;
        margin: 15px 0;
        text-align: center;
    }
    .subnds {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        color: #226aff;
    }
    .content {
      /deep/ img {
           width: 100%;
           height: 100%;
       }
    }
}

</style>

